<!--
 * @Date: 2022-04-10 16:50:23
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-08-05 09:06:52
 * @FilePath: \imitation-microblog-vue\src\components\chooseIMG\index.vue
 * @Description: something
-->
<template>
  <el-upload
    action="/api/upload"
    :auto-upload="false"
    list-type="picture-card"
    :limit="9"
    ref="uploadRef"
    :file-list="fileList"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :before-upload="beforeAvatarUpload"
  >
    <div class="iconfont icon-round-add"></div>
    <template #tip>
      <div class="el-upload__tip">仅支持jpg,上传图片大小不能超过0.8M</div>
    </template>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </el-upload>
</template>
<script lang="ts" setup>
import type { UploadProps, UploadUserFile, UploadInstance } from "element-plus";
import debounce from "lodash/debounce";
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
const fileList = ref<UploadUserFile[]>([]);
const imgList = ref<Promise<string>[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const uploadRef = ref<UploadInstance>();
const emits = defineEmits(["closeChooseImg", "handlerSuccess", "haveFile"]);
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  if (fileList.value.length === 0) {
    emits("closeChooseImg", false);
    emits("haveFile", false);
  }
};
const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
  if (uploadFiles.length !== 0) {
    emits("haveFile", true);
  }
};
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const handleSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  if (response.code == 200) {
    let p = Promise.resolve<string>(response.data.url);
    imgList.value.push(p);
  } else {
    let e = Promise.reject<string>("fail");
    imgList.value.push(e);
  }
};
const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.error("最多只能上传九张图片!");
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("仅支持jpg格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 0.8) {
    ElMessage.error("上传图片不能大于0.8M!");
    return false;
  }
  return true;
};
const submitUpload = () => {
  uploadRef.value!.submit();
};
const resetFileList = () => {
  fileList.value.length = 0;
};
watch(
  () => imgList.value,
  debounce((val: Promise<string>[]) => {
    const promises = Promise.all(val);
    promises
      .then((res) => {
        emits("handlerSuccess", res);
      })
      .catch((err) => {
        ElMessage.error("出错了!");
        return;
      });
  }, 1000),
  { deep: true }
);
defineExpose({
  submitUpload,
  resetFileList,
});
</script>
<style lang="less" scoped>
.saveImgs {
  padding: 5px;
  width: 50px;
  font-size: 12px;
  background-color: antiquewhite;
  border-radius: 15px;
  text-align: center;
  line-height: 15px;
  color: #ff8200;
  cursor: pointer;
  margin-top: 10px;
  border: none;
}
.el-dialog {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
